<!-- 优选推荐 optimization -->
<template>
  <div class="content">
    <el-form :model="query" ref="searchForm" label-width="100px" size="medium" class="search-form">
      <!-- <el-form-item label="" prop="productSn" label-width="0">
        <el-input v-model="query.productSn" placeholder="请输入商品编码" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item> -->
      <el-form-item label="" prop="keyword" label-width="0">
        <el-input v-model="query.keyword" placeholder="请输入商品名称" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item label-width="0px">
        <Cbutton @click="handleSearch" size="medium">查询</Cbutton>
        <!-- <Cbutton type="info" size="medium" @click="handleReset('searchForm')">清空</Cbutton> -->
      </el-form-item>
    </el-form>

    <div class="content-container">
      <div class="content-btn">
        <Cbutton @click="handleAdd">添加商品</Cbutton>
      </div>
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <!-- <el-table-column label="商品编码" prop="productSn" align="center"></el-table-column> -->
        <el-table-column label="商品名称" prop="name" align="center"></el-table-column>
        <el-table-column label="商品图片" align="center">
          <template slot-scope="scope">
            <el-image style="height: 80px;" class="product-img-small" :src="scope.row.albumPicsList[0]"
                      :preview-src-list="scope.row.albumPicsList"></el-image>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="brandName" label="商品品牌" align="center"></!--> -->
        <el-table-column prop="price" label="商品价格" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.productStyle === 1">
              {{scope.row.price ? Number(scope.row.price).toFixed(2) : '0.00'}}
            </span>
            <span v-else>{{scope.row.originPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="usePointLimit" label="商品积分" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.productStyle === 1">{{scope.row.usePointLimit || 0}}</span>
            <span v-else>{{scope.row.originUsePointLimit}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.statusSwitch" @change="handleStatus(scope.row, 'status')"></el-switch>
          </template>
        </el-table-column>

        <el-table-column prop="sort" label="排序" align="center">
          <template slot-scope="scope">
            <el-input class="text-center" v-model="scope.row.sort" @change="handleSortChange(scope.row, 'sort')"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" align="center" width="160px">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | glbTimeFormat}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="type" label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.statusSwitch" type="text" style="color: #F56C6C;" size="medium" @click="handleRemove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <SelectProduct v-if="addDialogShow" :modalShow.sync="addDialogShow" @selectChange="getAddGoodsList"></SelectProduct>

    <!-- <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
    </Pagination> -->
  </div>
</template>

<script>
import { GetOptiRecommendProduct, DeleteOptiRecommendProduct, UpdateOptiRecommendProduct, AddOptiRecommendProduct } from '@/api/onlineMan'
import SelectProduct from '@/components/SelectProduct/selectPro'
export default {
  name: 'operateRecommendOptimization',
  components: { SelectProduct },
  data () {
    return {
      query: {
        keyword: '',
        productSn: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableSelectList: [],
      tableLoading: false,
      addDialogShow: false,
      selectProducts: [],
      productIds: []
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true
      const pamams = JSON.parse(JSON.stringify(this.query))
      GetOptiRecommendProduct(pamams).then(res => {
        this.tableLoading = false
        let list = res.data
        list.forEach(e => {
          e.name = e.product.name
          e.productSn = e.product.productSn
          e.productStyle = e.product.productStyle
          e.price = e.product.price || 0
          e.originPrice = e.product.originPrice || 0
          e.usePointLimit = e.product.usePointLimit || 0
          e.originUsePointLimit = e.product.originUsePointLimit || 0
          e.albumPicsList = e.product.albumPics.split(',')
          e.statusSwitch = e.status === 0
          e.originstatusSwitch = e.status === 0
          e.originsort = e.sort
        })

        this.tableList = list
        this.totalCount = res.data.total || 0
      }).catch(e => {
        this.tableLoading = false
      })
    },
    handleAdd () {
      if (this.tableList.length >= 10) {
        this.$message.warning('最多展示10件商品，请删除商品再添加!')
        return
      }
      this.addDialogShow = true
    },
    handleRemove (row) {
      this.$confirm(`确定要删除该商品吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = row.id
        DeleteOptiRecommendProduct({ id: id }).then(res => {
          this.getList()
          this.$message.success(res.message || '操作成功')
        }).catch(() => { })
      }).catch(() => { })
    },

    handleSortChange (row, type) {
      let params = {
        id: row.id,
        sort: row.sort
      }
      const sortReg = /^([1-9]\d*|[0]{1,1})$/ // 含零的正整数正则
      if (!sortReg.test(params.sort)) {
        this.$message.warning('请输入排序数字！')
        return
      }
      this.updateReq(params, row, 'sort')
    },

    handleStatus (row) {
      const params = {
        id: row.id,
        status: row.statusSwitch ? '0' : '1' // 开启传0 关闭传1
      }
      this.updateReq(params, row, 'statusSwitch', true)
    },
    updateReq (params, row, key, force) {
      // force 是否重新赋值初始值
      UpdateOptiRecommendProduct(params).then(res => {
        // this.getList()
      }).catch(e => {
        if (force) {
          row[key] = row['origin' + key]
        }
      })
    },
    handleReset (formName) {
      this.$refs[formName].resetFields()
    },
    handleSearch () {
      this.query.pageNum = 1
      this.getList()
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    },
    getAddGoodsList (val) {
      const indexIds = this.selectProducts.map(e => e.id)
      val.forEach(e => {
        if (indexIds.indexOf(e.productId) <= -1) {
          const info = {
            id: e.productId,
            name: e.name
          }
          this.selectProducts.push(info)
          this.productIds.push({ id: info.id })
        }
      })
      let params = this.productIds
      AddOptiRecommendProduct(params).then(res => {
        this.getList()
      }).catch(e => { })
    }

  }
}

</script>
<style lang='scss' scoped>
</style>
